<template>
  <div>
    <h2>班主任管理</h2>
    <div class="search-bar">
      <select v-model="searchType">
        <option value="">请选择类型</option>
        <option value="name">姓名</option>
        <option value="gender">性别</option>
        <option value="phone">电话</option>
      </select>
      <input type="text" v-show="showType == 1" v-model="searchValue" />
      <select v-show="showType == 2" v-model="searchValue">
        <option value="1">男</option>
        <option value="0">女</option>
      </select>
      <button v-show="showType != 0" @click="getDirectors">搜索</button>
    </div>
    <table>
      <thead>
        <tr>
          <td>序号</td>
          <td>姓名</td>
          <td>性别</td>
          <td>手机</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item._id">
          <td>{{ item._id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.gender == 1 ? "男" : "女" }}</td>
          <td>{{ item.phone }}</td>
          <td>
            <button v-if="item.isDelete" @click="delDirector(item._id)">
              删除
            </button>
            <button @click="openUpdateDialog(item._id)">修改</button>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 分页组件 -->
    <my-pagination 
      :total="total" 
      :pageSize="pageSize"
      :currentPage="currentPage"
      :pageSizes="[3,5,10,15]"
      @current-change="currentChangeHandle"
      @size-change="sizeChangeHandle"></my-pagination>
    <!-- 模态框 -->
    <div class="dialog-container" v-show="visiableDialog">
      <div class="title">
        <div>修改班主任</div>
        <div>&times;</div>
      </div>
      <div class="body">
        <div>
          <label for="name">姓名:</label>
          <input
            id="name"
            type="text"
            placeholder="请输入班主任姓名"
            v-model="directorUpdate.name"
          />
        </div>
        <div>
          <label for="name">性别:</label>
          <select v-model="directorUpdate.gender">
            <option value="">--请选择性别--</option>
            <option value="1">男</option>
            <option value="0">女</option>
          </select>
        </div>
        <div>
          <label for="phone">电话:</label>
          <input
            type="text"
            placeholder="请输入电话"
            v-model="directorUpdate.phone"
          />
        </div>
      
      </div>
      <div class="footer">
        <button @click="updateDirecotr">修改</button>
        <button>取消</button>
      </div>
    </div>
    <div>
      <div>
        <label for="name">姓名:</label>
        <input
          id="name"
          type="text"
          placeholder="请输入班主任姓名"
          v-model="director.name"
        />
      </div>
      <div>
        <label for="name">性别:</label>
        <select v-model="director.gender">
          <option value="">--请选择性别--</option>
          <option value="1">男</option>
          <option value="0">女</option>
        </select>
      </div>
      <div>
        <label for="phone">电话:</label>
        <input type="text" placeholder="请输入电话" v-model="director.phone" />
      </div>
      <div>
        <button @click="addDirector">增加</button>
      </div>
    </div>
  </div>
</template>

<script>
import server from '@/utils/request'
import MyPagination from '@/components/MyPagination.vue';
export default {
  components: { MyPagination },
  data() {
    return {
      total:0,
      list: [],
      searchType: "",
      searchValue: "",
      showType: 0,
      director: {
        name: "",
        gender: "",
        phone: "",
        isDelete: true,
      },
      directorUpdate: {
        name: "",
        gender: "",
        phone: "",
        isDelete: true,
      },
      visiableDialog:false,
      currentPage:1,
      pageSize:5,
      total:0
    };
  },
  methods: {
    sizeChangeHandle(arg){
     this.pageSize=arg
     this.getDirectors()
    },
    currentChangeHandle(arg){
       this.currentPage=arg
       //重新调用查询列表的方法
       this.getDirectors()
    },
    async getDirectors() {
      const response=await server.get('/directors/getDirectors',{
        params:{
          type: this.searchType,
          value: this.searchValue,
          currentPage:this.currentPage,
          pageSize:this.pageSize
        }
      })
      this.list = response.data.result
      this.total=response.data.total
    },
    async addDirector() {
      const response=await server.post('/directors/addDirectors',this.director)
      if(response.code){
        alert(response.message);
         this.getDirectors();
      }
    },
    async delDirector(_id) {
      if (window.confirm("您确定要删除吗?")) {
        const response=await server.delete('/directors/deleteDirectors',{data:{_id}})
        if(response.code){
          this.getDirectors();
        }
      }
    },
    openUpdateDialog(_id){
      this.visiableDialog=true
      let result=this.list.find(item=>item._id===_id)
      this.directorUpdate={...result}
    },
    async updateDirecotr(){
      const response=await server.put('/directors/updateDirectors',this.directorUpdate)
      if(response.code){
        this.visiableDialog=false
        this.getDirectors()
      }
    }
  },
  watch: {
    searchType(newval) {
      //这里必须要清空上一次searchValue的值
      this.searchValue = "";
      if (newval == "name" || newval == "phone") {
        this.showType = 1;
      } else if (newval == "gender") {
        this.showType = 2;
      } else if (newval == "") {
        this.showType = 0;
      }
    },
  },
  created() {
    this.getDirectors();
  },
};
</script>

<style lang="scss" scoped>
table {
  border-collapse: collapse;
}
td {
  border: 1px solid #000;
  padding: 10px;
}
.search-bar {
  margin: 10px;
}

.dialog-container {
  position:absolute;
  top:100px;
  left: 650px;
  width: 500px;
  padding: 10px;
  background-color: #ccc;
  .title {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
  }
}
</style>